<template>
  <v-overlay v-if="messageIsShow">
    <v-sheet
      :width="$vuetify.breakpoint.smAndDown ? '100%' : 600"
      elevation="2"
      rounded="lg"
      class="overflow-hidden"
      color="overall"
    >
      <div class="p-absolute right mr-5 mt-5 cur-point" @click="closeMessage">
        关闭
      </div>

      <v-sheet
        elevation="4"
        color="appbar"
        height="60"
        class="d-flex justify-center align-center"
      >
        <span class="text-h5">图文问诊</span>
      </v-sheet>
      <div class="pa-2 d-flex flex-column">
        <v-sheet
          color="thirdary"
          height="300"
          class="overflow-y-auto rounded-t-lg"
          v-node="getNode"
        >
          <message-item
            v-for="(user, index) in messages"
            :user="user"
            :key="index"
          ></message-item>
        </v-sheet>
        <v-sheet color="thirdary" class="mt-2 px-5 rounded-b-lg">
          <v-textarea
            light
            no-resize
            rows="5"
            v-model="inputText"
            color="primary"
            background-color="thirdary"
            class="rounded-lg"
            @keyup.enter.stop="sendMessage"
          ></v-textarea>
        </v-sheet>
        <div class="d-flex mt-2">
          <v-btn color="appbar">预约</v-btn>
          <v-btn color="appbar" class="ml-2">视话 </v-btn>

          <v-spacer></v-spacer>
          <v-btn color="appbar" @click="sendMessage" width="100">发送</v-btn>
        </div>
      </div>
    </v-sheet>
  </v-overlay>
</template>



<script>
import { mapState, mapMutations } from "vuex";
import messageItem from "./messageItem.vue";
export default {
  components: { messageItem },
  data() {
    return {
      name: "匿名用户",
      subtitle: "山东",
      messages: [
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg:
            "医生的发来的信息医生的发来的信息医生的发来的信息医生的发来的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息医生的发来的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息",
        },
        {
          id: 1,
          name: "匿名用户",
          subtitle: "山东",
          msg: "我发过去的信息我发过去的信息我发过去的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息",
        },
        {
          id: 1,
          name: "匿名用户",
          subtitle: "山东",
          msg: "我发过去的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息",
        },
        {
          id: 1,
          name: "匿名用户",
          subtitle: "山东",
          msg: "我发过去的信息",
        },
        {
          id: 0,
          name: "医生姓名",
          subtitle: "主任医师",
          msg: "医生的发来的信息",
        },
      ],

      inputText: "",
      getNode: { node: "" },
    };
  },
  computed: {
    ...mapState(["messageIsShow"]),
  },

  methods: {
    ...mapMutations(["closeMessage"]),
    sendMessage() {
      const msg = this.inputText.trim();
      if (msg) {
        this.messages.push({
          id: 1,
          name: this.name,
          subtitle: this.subtitle,
          msg,
        });
        this.inputText = "";
      }
    },
  },
  // mounted() {
  //   console.log(this.$socket);
  //   this.$socket.emit("vue","从VUE发送到服务器")
  // },
  updated() {
    const node = this.getNode.node;
    if (!this.inputText && node) {
      node.scrollTop = node.scrollHeight;
    }
  },
};
</script>



<style lang="scss" scoped>
</style>
